{extend name="base" /}

{block name="title"}设备租赁{/block}


{block name="content"}
<!--breadcrumb_area-->
<!--<section class="breadcrumb_area parallax_effect" data-background="{$lease_header_bg_img}" style="-->
<!--          background: url({$lease_header_bg_img}) no-repeat center-->
<!--            center / cover;-->
<!--        ">-->
<!--  <div class="overlay_bg"></div>-->
<!--  <div class="container">-->
<!--    <div class="bread_content">-->
<!--      <h2>设备租赁</h2>-->
<!--    </div>-->
<!--  </div>-->
<!--</section>-->
<section style="margin-top: 90px;width: 100%">
  <!--    <div class="overlay_bg"></div>-->
  <div style="width: 100% !important;">
    <div class="bread_content">
      <h3 style="color: black;">设备租赁</h3>
      <h5 style="color:#c1c1c1;font-weight: normal !important;">EQUIPMENT RENTAL</h5>
    </div>
    <div class="decoration-top-line"></div>
  </div>
</section>
<!--breadcrumb_area-->
<section class="contact_area ">
  <div class="container">
    <div class="links-container">
      <!-- 滚动按钮 -->
      <button class="scroll-btn prev" id="prev">❮</button>
      <button class="scroll-btn next" id="next">❯</button>
      <!-- 链接容器 -->
      <div class="scroll-wrapper" id="scrollWrapper">
        <!-- 友情链接项 -->

        {volist name="$customer" id="item" key="key"}
        <div class="link-item">
          <img src="{$item.logo}" class="item-image" alt="{$item.name}">
          <div class="item-text">{$item.name}</div>
        </div>
        {/volist}
      </div>
    </div>

    <div id="accordion">
      {volist name="$device" id="item" key="key"}
      <div class="card  mt-4">
        <div class="card-header accordion-header" id="headingOne_{$key}" data-toggle="collapse" data-target="#collapseOne_{$key}"
          aria-expanded="true" aria-controls="collapseOne_{$key}">
          <h5 class="mb-0">
            <i class="fas fa-chevron-down custom-icon"></i> {$item.title}
          </h5>
        </div>
        <div id="collapseOne_{$key}" class="collapse {if $key == 1}show{/if}" aria-labelledby="headingOne_{$key}" data-parent="#accordion">
          <div class="card-body">
            {$item.content | raw}
          </div>
        </div>
      </div>
      {/volist}
    </div>

  </div>
</section>
<div class="sec_paded"></div>
{/block}

{block name="script"}

<script>
  let button = document.getElementById('next');
  function scroll(offset) {
      let wrapper = document.getElementById('scrollWrapper');
      let newPos = wrapper.scrollLeft + offset;

      // 限制滚动范围
      if (newPos < 0) newPos = 0;
      if (newPos > wrapper.scrollWidth - wrapper.clientWidth) {
          newPos = wrapper.scrollWidth - wrapper.clientWidth;
      }

      wrapper.scrollTo({
          left: newPos,
          behavior: 'smooth'
      });
  }
  document.getElementById('prev').onclick = function () {

      scroll(-220)
  };
  document.getElementById('next').onclick = function () {
      scroll(220)
  };



</script>
{/block}

